import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { filter } from 'graphql-anywhere';
import OrderHistoryItem from './OrderHistoryItem';
import InfiniteList from '../widgets/InfiniteList';
import { loadMoreData } from '../utils';

class OrderHistoryList extends Component {
  renderItem = ({item}) => {
    return (
      <OrderHistoryItem onSelect={this.props.onSelect}
        history={filter(OrderHistoryItem.fragments.history, item)}/>
    );
  }
  render() {
    const { orderHistories, loading, refetch, fetchMore } = this.props;

    return <InfiniteList top datas={orderHistories} loading={loading} refetch={refetch}
      fetchMore={fetchMore} renderItem={this.renderItem}/>;
  }
}

export default graphql(gql`
  query OrderHistoryList($orderId:String!,$offset:Int) {
    orderHistories(orderId:$orderId,offset:$offset) {
      ...OrderHistoryItem
    }
  }
  ${OrderHistoryItem.fragments.history}
`, {
  options: ({orderId}) => {
    return {
      variables: {
        orderId
      }
    };
  },
  props: ({ownProps, data:{orderHistories, refetch, fetchMore, loading}}) => {
    return {
      orderHistories,
      loading,
      refetch,
      fetchMore: () => loadMoreData(fetchMore, orderHistories, 'orderHistories')
    };
  }
})(OrderHistoryList);

